<template>
  <div style="position: relative">
    <div class="show-title" :style="{ ...zhutiTitleStyle, fontSize: '12px' }" v-if="showTitle">
      {{ shijiName }}《{{ title }}》
    </div>

    <swiper
      :style="`${publicStyle}`"
      ref="swiper"
      class="w-100 myswiper"
      @slideChange="onSlideChange"
      :options="swiperOptions"
      :modules="modules"
    >
      <swiper-slide
        class="h-100 d-flex flex-wrap align-items-center justify-content-center"
        :class="[firstSliderBgImg, `text-shadow-${textShadow}`]"
      >
        <div
          :class="[`text-shadow-${textShadow}`]"
          class="slide-text index-slide-text-title px-2 transition"
          :style="zhutiTitleStyle"
        >
          {{ zhutiTitle }}
        </div>
      </swiper-slide>
      <swiper-slide
        :class="[bgImageClass, `text-shadow-${textShadow}`]"
        class="h-100 d-flex flex-wrap align-items-center justify-content-center"
      >
        <div
          class="w-100 slide-text index-slide-text-title px-2 transition"
          :class="[`${activeIndex === 1 ? 'active' : ''}`]"
          :style="zhutiTitleStyle"
        >
          <p class="transition" :style="`font-size:${zhutiTitleStyle.fontSize};`">
            {{ shijiName }}
          </p>
          <p>
            {{ title }}
          </p>
        </div>
      </swiper-slide>
      <swiper-slide
        :class="[bgImageClass, `text-shadow-${textShadow}`]"
        class="h-100 d-flex flex-wrap align-items-center justify-content-center"
        v-for="(c, i) in createRow"
        :key="i"
      >
        <div
          ref="wrapRef"
          @scroll="(e) => onSwiperScroll(e, i)"
          class="h-100 w-100"
          :class="[messageType === messageTypeEnum.JW ? 'overflow-auto' : 'flex items-center']"
        >
          <p
            class="w-100 slide-text px-2 transition"
            :class="[`${activeIndex === i + 2 ? 'active' : ''}`]"
            :style="{
              ...textStyle,
              textAlign: messageTypeEnum.JW === messageType ? 'left' : textStyle.textAlign,
            }"
          >
            <span
              v-for="(t, x) in c"
              :key="x"
              :style="`--index:${x / 8}s`"
              class="lyric-item transition"
              :class="[`${activeIndex === i + 2 ? 'active' : ''}`]"
              >{{ t }}<br
            /></span>
          </p>
        </div>
      </swiper-slide>
      <template v-slot:button-prev>
        <div class="swiper-button-prev"></div>
      </template>
      <template v-slot:button-next>
        <div class="swiper-button-next"></div>
      </template>
      <template v-slot:pagination>
        <div class="swiper-pagination"></div>
      </template>
    </swiper>
  </div>
</template>
<script>
import "../index.css";
import { messageType as messageTypeEnum } from "../config";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination, Navigation, Thumbs, Keyboard } from "swiper/modules";

export default {
  props: {
    shijiName: {
      type: String,
      default: "",
    },
    showTitle: {
      type: Boolean,
      default: false,
    },
    firstSliderBgImg: {
      type: String,
      default: "firstBgjb-t",
    },
    zhutiTitleStyle: {
      type: Object,
      default: () => ({
        fontSize: "1.5rem",
        color: "#fff",
      }),
    },
    zhutiTitle: {
      type: String,
      default: "",
    },
    createRow: {
      type: Array,
      default: () => [],
    },
    textStyle: {
      type: Object,
      default: () => ({
        fontSize: "1rem",
        color: "#fff",
      }),
    },
    title: {
      type: String,
      default: "",
    },
    bgImageClass: {
      type: String,
      default: "bgjb",
    },
    textShadow: {
      type: Number,
      default: 0,
    },
    publicStyle: {
      type: String,
      default: "",
    },
    textAlign: {
      type: String,
      default: "center",
    },
    messageType: {
      type: String,
      default: messageTypeEnum.ZM,
    },
  },
  components: { Swiper, SwiperSlide },
  data() {
    return {
      swiperOptions: {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
        },
        keyboard: true,
        observer: true,
      },
      activeIndex: 0,
      messageTypeEnum,
      modules: [Autoplay, Pagination, Navigation, Thumbs, Keyboard],
    };
  },
  computed: {
    swiper() {
      return this.$refs.swiper.$swiper;
    },
    currentWrapRef() {
      return this.$refs.wrapRef[this.activeIndex - 2] || null;
    },
  },
  methods: {
    onSlideChange() {
      this.activeIndex = this.swiper.activeIndex;
      this.$emit("slideChange", this.swiper.activeIndex);
      if (this.currentWrapRef) {
        this.currentWrapRef.scrollTo(0, 0);
      }
    },
    onSwiperScroll(e, index) {
      const progress = e.target.scrollTop / (e.target.scrollHeight - e.target.clientHeight);
      this.$emit("scroll", progress, index);
    },
  },
};
</script>
<style scoped>
/*上面的swier*/
.myswiper {
  width: 600px;
  height: 360px;
  overflow: hidden;
}

@media screen and (max-width: 600px) {
  .myswiper {
    width: 100% !important;
    height: 200px !important;
  }

  .myswiperth {
    width: 100% !important;
    height: 60px !important;
  }
}

/deep/ .swiper-button-next,
.swiper-button-prev {
  color: white;
}

/deep/ .swiper-pagination-bullet-active {
  background: #ffffff !important;
}

.show-title {
  position: absolute;
  top: 5px;
  z-index: 10;
  left: 10px;
}

.transition {
  transition: all 0.2s linear;
}

.slide-text {
  opacity: 0;
}

.slide-text.active {
  opacity: 1;
}

.lyric-item {
  opacity: 0;
  /* transition-delay: calc(var(--index)); */
  display: block;
}

.lyric-item.active {
  opacity: 1;
}
</style>
